<extend name="common:base" />

<block name="tohead">
	<link rel="stylesheet" href="/static/admin/js/webuploader/webuploader.css">
</block>

<block name="content">
	<ul class="nav nav-tabs">
		<li><a href="{{:url('slide/index')}}" class="index-url">幻灯片列表</a></li>
		<li><a href="{{:url('slide/add')}}">新增幻灯片</a></li>
		<li class="active"><a>编辑幻灯片</a></li>
	</ul>
	
	<form name="dataForm" class="form-horizontal top15" enctype="multipart/form-data" method="post" action="{{:url('slide/editsave')}}">
		<table class="table table-bordered must-middle">
			<tr>
				<th width="10%"><span class="must-red">*</span> 标题</th>
				<td width="45%">
					<input type="text" name="title" value="{{$lists.title}}" class="form-control" maxlength="50">
				</td>
				<!-- <th width="10%" rowspan="3">图片</th>
				<td width="35%" rowspan="3" style="text-align: center;">
					<div id="filePicker">
						<img id="image_show" src="{{$lists.faceimg}}" style="width: 120px; height: 75px;">
					</div>
					<span class="help-block" style="color: #999;">图片比例为 16：10</span>
				</td> -->
			</tr>
			<input type="hidden" name="id" value="{{$lists.id}}">
			<tr>
				<th><span class="must-red">*</span> 所属分类</th>
				<td>
					{{$categorylists}}
				</td>
			</tr>
			<tr>
				<th>URL</th>
				<td>
					<input type="text" name="url" value="{{$lists.url}}" class="form-control" maxlength="100">
				</td>
			</tr>
			<tr>
				<td colspan="4" style="text-align: center;">
					<input type="submit" value="保存">
					<!-- <a class="btn btn-primary btn-save">保 存</a> -->
					<a class="btn btn-default btn-cancel left10">返 回</a>
				</td>
			</tr>
		</table>
	
		<label class="add_imgs">添加图片</label><a href="javascript:void(0)" id="add_html" class="add_imgs btn btn-primary">add</a>
		<div id="longbody" style="margin-top: 50px;"></div>
		<div id="has_imgs" style="margin-top: 50px;"></div>
	</form>
</block>

<block name="footer">
<!-- <script src="/static/admin/js/webuploader/webuploader.nolog.min.js"></script> -->
<script>
// 封面图上传
jQuery(function() {
	var $ = jQuery, uploader;
	var images = '{{$lists.faceimg}}';
	console.log(eval(images));
	if(images && images!=null){
		$('.add_imgs').hide();
		var has_imgs_html = '<input type="hidden" name="has_img" value="1">';
		$('#has_imgs').html(has_imgs_html);
		for (var i in eval(images)) {
			console.log(eval(images)[i]['url']);
			var image_html = '';
			image_html  += '<div class="add_detail" style="">';
			//image_html += '<a href="javascript:void(0)" class="btn btn-danger body_del" style="margin-left: 570px;">delete</a>';
			// image_html += '<input type="file" name="longbody_pic[]" class="long_image" style="display:none" value="'+eval(images)[i]['url']+'">';
			// image_html += '<input type="hidden" name="longbody_pic_back[]" value="'+eval(images)[i]['url']+'">';
			// image_html += '<input type="hidden" name="has_img" value="1">';
			image_html += '<img class="long_image_back" style="height:200px;margin-top:20px;" src="'+eval(images)[i]['url']+'">';
			image_html += '</div>';
			$('#longbody').append(image_html);
		}
	}
	// var aid = $('input[name="id"]').val();
	
	// // 初始化Web Uploader
	// uploader = WebUploader.create({
	// 	// 自动上传
	// 	auto: true,
	// 	// swf文件路径
	// 	swf: '/static/admin/js/webuploader/Uploader.swf',
	// 	// 文件接收服务端
	// 	server: "{{:url('slide/upimage')}}",
	// 	formData: {'aid':aid},
	// 	// 选择文件的按钮。可选。
	// 	// 内部根据当前运行是创建，可能是input元素，也可能是flash
	// 	pick: '#filePicker',
	// 	// 只允许选择文件，可选。
	// 	accept: {
	// 		title: 'Images',
	// 		extensions: 'gif,jpg,jpeg,bmp,png',
	// 		mimeTypes: 'image/*'
	// 	}
	// });
	
	// // 当有文件添加进来的时候
 //    uploader.on( 'fileQueued', function( file ) { });
	
	// // 文件上传过程中创建进度条实时显示
	// uploader.on( 'uploadProgress', function( file, percentage ) { });
	
	// // 文件上传成功，给item添加成功class, 用样式标记上传成功
	// uploader.on( 'uploadSuccess', function(file, ret) {
	// 	if(ret.status == 1){
	// 		layer.msg(ret.msg, {icon:1, time:1500}, function(){
	// 			$('#image_show').attr('src', ret.imgurl);
	// 		});
	// 	}else{
	// 		layer.msg(ret.msg, {icon:5, time:1500});
	// 	}
	// });
	
	// // 文件上传失败，现实上传出错
	// uploader.on( 'uploadError', function( file ) { });
	
	// // 完成上传完了，成功或者失败，先删除进度条。
 //    uploader.on( 'uploadComplete', function( file ) { });

    /**
     * 20190409 zhuxuefei
     */
    $('#add_html').click(function(){
		var body_html = '';
		body_html += '<div style="margin-top:50px;">'+
				'<input type="file" name="longbody_pic[]" class="long_image longbody_pic" style="display:none;">'+
				'<img class="long_image_back long_image_back1" style="width:200px;float:left;" src="/static/images/default.png">'+
				'<img class="long_image_back long_image_back2" style="width:300px;float:left;margin-left:20px;" src="/static/images/default.png">'+
				'<img class="long_image_back long_image_back3" style="width:500px;float:left;margin-left:20px;" src="/static/images/default.png">'+
				'<img class="long_image_back long_image_back4" style="width:800px;float:left;margin-left:20px;" src="/static/images/default.png">'+
				'<div style="clear:both"></div>'+
				'</div>';
		$('#longbody').append(body_html);
		var long_image_backs = $('.long_image_back');
		long_image_backs.unbind("click");
		long_image_backs.on('click',function(e){
			$(this).prev().click();
		})

		var long_images = $('.long_image');
		long_images.on('change',function(e){
			var file = this.files[0];
			$(this).css('height','235px');
			$(this).siblings('.long_image_back').attr('src',window.URL.createObjectURL(file));
			$(this).siblings('.long_image_back').css('display','block');
		});
	});
});
</script>
</block>
